<template>
  <div>
    <load-more tip="销量统计" :show-loading="false" background-color="#fbf9fe"></load-more>
    <div style="padding:0 15px;">
      <x-table full-bordered>
        <thead>
          <tr style="background-color:#49AEF1">
            <th>销量统计</th>
            <th>金额</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><p style="color:#787878; font-size:14px;">排列3</p></td>
            <td><p style="color:#787878; font-size:14px;">100</p></td>
          </tr>
          <tr>
            <td><p style="color:#787878; font-size:14px;">超级大乐透</p></td>
            <td><p style="color:#787878; font-size:14px;">1</p></td>
          </tr>
          <tr>
            <td><p style="color:#787878; font-size:14px;">排列5</p></td>
            <td><p style="color:#787878; font-size:14px;">60</p></td>
          </tr>
          <tr>
            <td><p style="color:#787878; font-size:14px;">7星彩</p></td>
            <td><p style="color:#787878; font-size:14px;">10000</p></td>
          </tr>
          <tr>
            <td><p style="color:#787878; font-size:14px;">江苏(趣味台球)</p></td>
            <td><p style="color:#787878; font-size:14px;">5070</p></td>
          </tr>
        </tbody>
      </x-table>
    </div>
    <div class="chart-wrapper" >
      <canvas id="reportIndex_mountNode"></canvas>
    </div>
    <div>
      <load-more tip="中奖统计" :show-loading="false" background-color="#fbf9fe"></load-more>
      <x-table>
        <thead>
        <tr style="background-color:#49AEF1">
          <th>中奖统计</th>
          <th>金额</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td><p style="color:#787878; font-size:14px;">排列3</p></td>
          <td><p style="color:#787878; font-size:14px;">500</p></td>
        </tr>
        <tr>
          <td><p style="color:#787878; font-size:14px;">超级大乐透</p></td>
          <td><p style="color:#787878; font-size:14px;">100</p></td>
        </tr>
        <tr>
          <td><p style="color:#787878; font-size:14px;">排列5</p></td>
          <td><p style="color:#787878; font-size:14px;">67660</p></td>
        </tr>
        <tr>
          <td><p style="color:#787878; font-size:14px;">7星彩</p></td>
          <td><p style="color:#787878; font-size:14px;">110000</p></td>
        </tr>
        <tr>
          <td><p style="color:#787878; font-size:14px;">江苏(趣味台球)</p></td>
          <td><p style="color:#787878; font-size:14px;">51070</p></td>
        </tr>
        </tbody>
      </x-table>
      </div>
    <div class="chart-wrapper" >
      <canvas id="reportIndex_mountNode1"></canvas>
    </div>
    <load-more tip="预警信息" :show-loading="false" background-color="#fbf9fe"></load-more>
    <div style="padding:0 15px;">
      <x-table>
        <thead>
        <tr>
          <th>预警名称</th>
          <th>数量</th>
          <th>月份</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td><p style="color:#787878; font-size:14px;">排列3奖池预警</p></td>
          <td><p style="color:#787878; font-size:14px;">10</p></td>
          <td><p style="color:#787878; font-size:14px;">10</p></td>
        </tr>
        <tr>
          <td><p style="color:#787878; font-size:14px;">高频游戏奖池预警</p></td>
          <td><p style="color:#787878; font-size:14px;">3</p></td>
          <td><p style="color:#787878; font-size:14px;">10</p></td>
        </tr>
        </tbody>
      </x-table>
    </div>
    <div class="chart-wrapper" >
      <canvas id="reportIndex_mountNode2"></canvas>
    </div>
  <br>
  </div>
</template>

<script>
import { XTable, LoadMore } from 'vux'

let F2 = require('@antv/f2')
export default {
  components: {
    XTable,
    LoadMore
  },
  mounted () {
    this.setChart()
    this.setChart1()
    this.setChart2()
  },
  methods: {
    setChart () {
      const data = [
        { tem: 6.9, city: 'Tokyo' },
        { tem: 11.3, city: 'New York' },
        { tem: 13.5, city: 'Berlin' },
        { tem: 17, city: 'London' },
        { tem: 18.6, city: 'Beijing' }
      ]
      const chart = new F2.Chart({
        id: 'reportIndex_mountNode',
        width: window.innerWidth,
        height: window.innerWidth > window.innerHeight ? (window.innerHeight - 54) : window.innerWidth * 0.707,
        pixelRatio: window.devicePixelRatio
      })
      chart.coord('polar', {
        transposed: true,
        endAngle: Math.PI
      })

      chart.source(data)
      chart.axis('city', {
        grid: null,
        line: null
      })
      chart.axis('tem', false)
      chart.legend({
        position: 'right'
      })
      chart.interval().position('city*tem').color('city')
      chart.render()
    },
    setChart1 () {
      const data = [
        { time: '2016-08-08 00:00:00', tem: 10, city: 'Beijing' },
        { time: '2016-08-08 00:10:00', tem: 22, city: 'Beijing' },
        { time: '2016-08-08 00:30:00', tem: 16, city: 'Beijing' },
        { time: '2016-08-09 00:35:00', tem: 26, city: 'Beijing' },
        { time: '2016-08-09 01:00:00', tem: 12, city: 'Beijing' },
        { time: '2016-08-09 01:20:00', tem: 26, city: 'Beijing' },
        { time: '2016-08-10 01:40:00', tem: 18, city: 'Beijing' },
        { time: '2016-08-10 02:00:00', tem: 26, city: 'Beijing' },
        { time: '2016-08-10 02:20:00', tem: 12, city: 'Beijing' },
        { time: '2016-08-08 00:00:00', tem: 4, city: 'Hangzhou' },
        { time: '2016-08-08 00:10:00', tem: 3, city: 'Hangzhou' },
        { time: '2016-08-08 00:30:00', tem: 6, city: 'Hangzhou' },
        { time: '2016-08-09 00:35:00', tem: -12, city: 'Hangzhou' },
        { time: '2016-08-09 01:00:00', tem: 1, city: 'Hangzhou' },
        { time: '2016-08-09 01:20:00', tem: 9, city: 'Hangzhou' },
        { time: '2016-08-10 01:40:00', tem: 13, city: 'Hangzhou' },
        { time: '2016-08-10 02:00:00', tem: -3, city: 'Hangzhou' },
        { time: '2016-08-10 02:20:00', tem: 11, city: 'Hangzhou' }
      ]
      const chart = new F2.Chart({
        id: 'reportIndex_mountNode1',
        width: window.innerWidth,
        height: window.innerWidth > window.innerHeight ? (window.innerHeight - 54) : window.innerWidth * 0.707,
        pixelRatio: window.devicePixelRatio
      })
      chart.source(data, {
        time: {
          type: 'timeCat',
          tickCount: 3,
          mask: 'hh:mm',
          range: [ 0, 1 ]
        },
        tem: {
          tickCount: 3,
          formatter (item) {
            return item + '%'
          }
        }
      })
      chart.tooltip({
        showCrosshairs: true
      })

      const colors = {
        Beijing: '#8E77ED',
        Hangzhou: '#1890FF'
      }

      chart.line().position('time*tem')
        .color('city', function (city) {
          return colors[city]
        })
      chart.point().position('time*tem')
        .color('city', function (city) {
          return colors[city]
        })
        .style({
          stroke: '#fff',
          lineWidth: 1
        })
      chart.legend({
        custom: true,
        align: 'center',
        itemWidth: 60,
        wordSpace: 8,
        items: [
          { name: 'Beijing', marker: customizeMarker, fill: colors.Beijing },
          { name: 'Hangzhou', marker: customizeMarker, fill: colors.Hangzhou }
        ]
      })

      chart.render()
    },
    setChart2 () {
      const data = [
        { time: '周一', tem: 6.9, rain: 10 },
        { time: '周二', tem: 9.5, rain: 13 },
        { time: '周三', tem: 14.5, rain: 14 },
        { time: '周四', tem: 18.2, rain: 10 },
        { time: '周五', tem: 21.5, rain: 12 },
        { time: '周六', tem: 25.2, rain: 16 },
        { time: '周日', tem: 26.5, rain: 13 }
      ]
      const chart = new F2.Chart({
        id: 'reportIndex_mountNode2',
        width: window.innerWidth,
        height: window.innerWidth > window.innerHeight ? (window.innerHeight - 54) : window.innerWidth * 0.707,
        pixelRatio: window.devicePixelRatio
      })

      chart.source(data, {
        tem: {
          min: 0,
          max: 30,
          tickInterval: 10,
          nice: false
        },
        rain: {
          min: 0,
          max: 30,
          tickInterval: 10,
          nice: false
        }
      })

      chart.axis('time', {
        grid: null
      })

      chart.interval().position('time*tem')
      chart.line().position('time*rain')
        .color('#5ed470')
        .shape('smooth')
      chart.point().position('time*rain').style({
        stroke: '#5ed470',
        fill: '#fff',
        lineWidth: 2
      })

      // 绘制辅助线
      chart.guide().line({
        start (xScale, yScales) {
          let sum = 0
          const yScale = yScales[1]
          yScale.values.forEach(v => (sum += v))
          return [ 'min', sum / yScale.values.length ]
        },
        end (xScale, yScales) {
          let sum = 0
          const yScale = yScales[1]
          yScale.values.forEach(v => (sum += v))

          return [ 'max', sum / yScale.values.length ]
        },
        style: {
          stroke: '#5ed470', // 线的颜色
          lineDash: [ 0, 2, 2 ], // 虚线的设置
          lineWidth: 1 // 线的宽度
        } // 图形样式配置
      })
      chart.guide().text({
        position (xScale, yScales) {
          let sum = 0
          const yScale = yScales[1]
          yScale.values.forEach(v => (sum += v))
          return [ 'max', sum / yScale.values.length ]
        },
        content: '平均降雨量',
        style: {
          textAlign: 'end',
          textBaseline: 'top',
          fill: '#5ed470'
        },
        offsetY: 5
      })
      chart.render()
    }
  }
}

function customizeMarker (x, y, r, ctx) {
  ctx.lineWidth = 2
  ctx.strokeStyle = ctx.fillStyle
  ctx.moveTo(x - r - 4, y)
  ctx.lineTo(x + r + 4, y)
  ctx.stroke()
  ctx.arc(x, y, r, 0, Math.PI * 2, false)
  ctx.fill()
}
</script>
